<template>
  <!-- 我的页面 操作组件 -->
  <ul class="operations">
    <el-tooltip
      class="item"
      effect="dark"
      :content="isMsgPush ? '关闭消息推送' : '开启消息推送'"
      placement="top"
    >
      <router-link to="/mine/message" title="消息" class="operation-item">
        <i
          @click="msgPushDisabled"
          :class="
            isMsgPush ? 'el-icon-message-solid' : 'el-icon-close-notification'
          "
        ></i></router-link
    ></el-tooltip>
    <el-tooltip class="item" effect="dark" content="编辑资料" placement="top">
      <router-link to="/mine/edit_user_info" class="operation-item"
        ><i class="el-icon-edit-outline" @click="changeShow"></i></router-link
    ></el-tooltip>
    <el-tooltip class="item" effect="dark" content="氛围灯主题" placement="top">
      <li class="operation-item" @click="swatches">
        <i class="el-icon-collection-tag"></i></li
    ></el-tooltip>
    <el-tooltip class="item" effect="dark" content="退出登录" placement="top">
      <li class="operation-item" @click="signOut">
        <i class="el-icon-switch-button"></i></li
    ></el-tooltip>
    <el-drawer
      :visible.sync="drawer"
      :direction="direction"
      custom-class="drawer-bg"
      :before-close="handleClose"
      :show-close="false"
      :withHeader="false"
      :size="screenWidth < 768 ? '60%' : '30%'"
    >
      <div class="drawer-title">氛围灯主题</div>
      <MusicSwatches></MusicSwatches>
    </el-drawer>
  </ul>
</template>

<script>
import MusicSwatches from "@/components/public/MusicSwatches";
import { mapActions, mapGetters, mapState } from "vuex";
export default {
  name: "MineOperation",
  components: { MusicSwatches },
  data() {
    return {
      drawer: false,
      direction: "ltr",
    };
  },
  computed: {
    ...mapState("music", ["screenWidth"]),
    ...mapState("user", ["isMsgPush"]),
    ...mapGetters("user", ["isVip"]),
  },
  methods: {
    ...mapActions("user", ["updateUserInfo", "updateToken", "msgPushDisabled"]),
    signOut() {
      this.updateUserInfo({});
      this.updateToken("");
    },
    changeShow() {
      this.$bus.$emit("changeShow", true);
    },
    swatches() {
      if (this.isVip) {
        this.drawer = true;
      } else {
        this.$message({ message: "仅会员可使用该功能", type: "error" });
      }
    },
    handleClose(done) {
      done();
    },
  },
};
</script>

<style lang="less" scoped>
.drawer-title {
  text-align: center;
  padding: 0.5rem 0;
}
.operations {
  position: absolute;
  top: 0.3rem;
  right: 0;
  height: 1rem;
  color: #fff;
  font-size: 0.4rem;
  .operation-item {
    display: inline-block;
    margin-right: 0.3rem;
    cursor: pointer;
  }
}
</style>